<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>张三 - 软件技术专业简历</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/animations.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto+Mono:wght@300;400&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 背景粒子效果 -->
    <div id="particles-js"></div>
    
    <!-- 主容器 -->
    <div class="container">
        <!-- 侧边栏 - 个人信息 -->
        <aside class="sidebar">
            <div class="profile">
                <div class="avatar-container">
                    <img src="assets/avatar.jpg" alt="张三" class="avatar">
                    <div class="status-indicator"></div>
                </div>
                <h1>方顺</h1>
                <p class="title">软件技术应届生</p>
            </div>
            
            <div class="contact-info">
                <h2>联系方式</h2>
                <ul>
                    <li><i class="fas fa-envelope"></i> 3478196734@qq.com</li>
                    <li><i class="fas fa-phone"></i> +177 4489 8557/li>
                    <li><i class="fas fa-map-marker-alt"></i> 海南, 中国</li>
                </ul>
            </div>
            
            <div class="skills">
                <h2>技术技能</h2>
                <div class="skill-category">
                    <h3>编程语言</h3>
                    <div class="skill-bar">
                        <span>Java</span>
                        <div class="bar-container">
                            <div class="bar" data-level="90"></div>
                        </div>
                    </div>
                    <div class="skill-bar">
                        <span>Python</span>
                        <div class="bar-container">
                            <div class="bar" data-level="85"></div>
                        </div>
                    </div>
                    <div class="skill-bar">
                        <span>JavaScript</span>
                        <div class="bar-container">
                            <div class="bar" data-level="80"></div>
                        </div>
                    </div>
                    <div class="skill-bar">
                        <span>C++</span>
                        <div class="bar-container">
                            <div class="bar" data-level="75"></div>
                        </div>
                    </div>
                </div>
                
                <div class="skill-category">
                    <h3>框架 & 技术</h3>
                    <div class="skill-bar">
                        <span>Spring Boot</span>
                        <div class="bar-container">
                            <div class="bar" data-level="85"></div>
                        </div>
                    </div>
                    <div class="skill-bar">
                        <span>React</span>
                        <div class="bar-container">
                            <div class="bar" data-level="80"></div>
                        </div>
                    </div>
                    <div class="skill-bar">
                        <span>Docker</span>
                        <div class="bar-container">
                            <div class="bar" data-level="75"></div>
                        </div>
                    </div>
                    <div class="skill-bar">
                        <span>MySQL</span>
                        <div class="bar-container">
                            <div class="bar" data-level="85"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="languages">
                <h2>语言能力</h2>
                <div class="language">
                    <span>中文 (母语)</span>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
                <div class="language">
                    <span>英语 (CET-6)</span>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                    </div>
                </div>
            </div>
        </aside>
        
        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 导航菜单 -->
            <nav class="main-nav">
                <ul>
                    <li><a href="#about" class="active"><i class="fas fa-user"></i> 关于我</a></li>
                    <li><a href="#experience"><i class="fas fa-briefcase"></i> 经历</a></li>
                    <li><a href="#projects"><i class="fas fa-code"></i> 项目</a></li>
                    <li><a href="#education"><i class="fas fa-graduation-cap"></i> 教育</a></li>
                    <li><a href="#contact"><i class="fas fa-envelope"></i> 联系</a></li>
                </ul>
            </nav>
            
            <!-- 关于我部分 -->
            <section id="about" class="section active-section">
                <h2>关于我</h2>
                <div class="section-content">
                    <div class="about-intro">
                        <p>我是一名充满激情的软件工程师，拥有扎实的计算机科学基础和丰富的全栈开发经验。专注于构建高效、可扩展的Web应用程序，对新技术保持持续学习的热情。</p>
                        
                        <div class="about-details">
                            <div class="detail-item">
                                <i class="fas fa-laptop-code"></i>
                                <div>
                                    <h3>技术专长</h3>
                                    <p>全栈开发 | 系统架构设计 | 性能优化 | 代码重构</p>
                                </div>
                            </div>
                            
                            <div class="detail-item">
                                <i class="fas fa-lightbulb"></i>
                                <div>
                                    <h3>个人特质</h3>
                                    <p>解决问题能力强 | 注重代码质量 | 团队协作精神 | 持续学习者</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="career-goals">
                        <h3>职业目标</h3>
                        <p>寻求一个能够充分发挥我的技术能力和创新思维的软件开发职位，在挑战性的项目中成长，同时为团队和公司创造价值。</p>
                    </div>
                    
                    <div class="technical-highlights">
                        <h3>技术亮点</h3>
                        <ul>
                            <li>精通Java和Python，能够设计并实现高效的后端服务</li>
                            <li>熟悉微服务架构和容器化技术(Docker, Kubernetes)</li>
                            <li>有丰富的数据库设计和优化经验(MySQL, MongoDB)</li>
                            <li>掌握现代前端技术(React, Vue.js)和响应式设计</li>
                            <li>了解DevOps流程和CI/CD实践</li>
                        </ul>
                    </div>
                    
                    <div class="interests">
                        <h3>兴趣爱好</h3>
                        <div class="interest-items">
                            <div class="interest-item">
                                <i class="fas fa-laptop-code"></i>
                                <span>开源贡献</span>
                            </div>
                            <div class="interest-item">
                                <i class="fas fa-book"></i>
                                <span>技术阅读</span>
                            </div>
                            <div class="interest-item">
                                <i class="fas fa-music"></i>
                                <span>音乐制作</span>
                            </div>
                            <div class="interest-item">
                                <i class="fas fa-gamepad"></i>
                                <span>游戏开发</span>
                            </div>
                            <div class="interest-item">
                                <i class="fas fa-running"></i>
                                <span>健身运动</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 经历部分 -->
            <section id="experience" class="section">
                <h2>工作经历</h2>
                <div class="section-content">
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-date">2022.07 - 2022.09</div>
                            <div class="timeline-content">
                                <h3>ABC科技有限公司 <span>- 软件开发实习生</span></h3>
                                <ul>
                                    <li>参与公司核心产品后台服务的开发与维护，使用Spring Boot框架</li>
                                    <li>优化数据库查询，将关键API响应时间缩短30%</li>
                                    <li>实现自动化测试脚本，提高测试覆盖率至85%</li>
                                    <li>协助团队完成微服务架构的迁移工作</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="timeline-item">
                            <div class="timeline-date">2021.06 - 2021.08</div>
                            <div class="timeline-content">
                                <h3>XYZ软件工作室 <span>- 前端开发助理</span></h3>
                                <ul>
                                    <li>使用React开发客户管理系统前端界面</li>
                                    <li>实现响应式设计，确保在不同设备上良好显示</li>
                                    <li>优化页面加载速度，减少首屏渲染时间40%</li>
                                    <li>参与UI组件库的设计与开发</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 项目部分 -->
            <section id="projects" class="section">
                <h2>项目经历</h2>
                <div class="section-content">
                    <div class="projects-grid">
                        <div class="project-card">
                            <div class="project-header">
                                <h3>校园二手交易平台</h3>
                                <div class="project-links">
                                    <a href="#"><i class="fab fa-github"></i></a>
                                    <a href="#"><i class="fas fa-external-link-alt"></i></a>
                                </div>
                            </div>
                            <div class="project-description">
                                <p>一个基于Spring Boot和Vue.js的全栈项目，实现校园内二手物品的交易平台，包含用户认证、商品发布、搜索、聊天等功能。</p>
                            </div>
                            <div class="project-tech">
                                <span>Spring Boot</span>
                                <span>Vue.js</span>
                                <span>MySQL</span>
                                <span>WebSocket</span>
                            </div>
                        </div>
                        
                        <div class="project-card">
                            <div class="project-header">
                                <h3>智能家居控制系统</h3>
                                <div class="project-links">
                                    <a href="#"><i class="fab fa-github"></i></a>
                                </div>
                            </div>
                            <div class="project-description">
                                <p>使用Python和Raspberry Pi开发的物联网项目，通过手机App控制家中的灯光、温度等设备，支持语音控制和自动化场景。</p>
                            </div>
                            <div class="project-tech">
                                <span>Python</span>
                                <span>Flask</span>
                                <span>MQTT</span>
                                <span>Raspberry Pi</span>
                            </div>
                        </div>
                        
                        <div class="project-card">
                            <div class="project-header">
                                <h3>在线考试系统</h3>
                                <div class="project-links">
                                    <a href="#"><i class="fab fa-github"></i></a>
                                </div>
                            </div>
                            <div class="project-description">
                                <p>为学校开发的在线考试平台，支持多种题型、自动组卷、在线监考和自动评分功能，采用微服务架构。</p>
                            </div>
                            <div class="project-tech">
                                <span>Java</span>
                                <span>Spring Cloud</span>
                                <span>React</span>
                                <span>MongoDB</span>
                            </div>
                        </div>
                        
                        <div class="project-card">
                            <div class="project-header">
                                <h3>个人博客系统</h3>
                                <div class="project-links">
                                    <a href="#"><i class="fab fa-github"></i></a>
                                    <a href="#"><i class="fas fa-external-link-alt"></i></a>
                                </div>
                            </div>
                            <div class="project-description">
                                <p>使用Django开发的全功能博客系统，支持Markdown编辑、代码高亮、标签分类和评论功能。</p>
                            </div>
                            <div class="project-tech">
                                <span>Python</span>
                                <span>Django</span>
                                <span>PostgreSQL</span>
                                <span>Bootstrap</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 教育部分 -->
            <section id="education" class="section">
                <h2>教育背景</h2>
                <div class="section-content">
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-date">2019.09 - 2023.06</div>
                            <div class="timeline-content">
                                <h3>北京大学 <span>- 软件工程 学士</span></h3>
                                <ul>
                                    <li>GPA: 3.8/4.0 (专业前10%)</li>
                                    <li>主修课程: 数据结构与算法、操作系统、计算机网络、数据库系统、软件工程、人工智能基础</li>
                                    <li>获得校级一等奖学金(2021, 2022)</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="timeline-item">
                            <div class="timeline-date">2021.09 - 2022.01</div>
                            <div class="timeline-content">
                                <h3>清华大学 <span>- 交换生</span></h3>
                                <ul>
                                    <li>参与计算机科学与技术系的交换项目</li>
                                    <li>选修课程: 分布式系统、机器学习、大数据处理</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <div class="certifications">
                        <h3>证书 & 认证</h3>
                        <div class="cert-grid">
                            <div class="cert-item">
                                <i class="fas fa-certificate"></i>
                                <div>
                                    <h4>Oracle Certified Professional: Java SE 11 Developer</h4>
                                    <span>2022年6月</span>
                                </div>
                            </div>
                            <div class="cert-item">
                                <i class="fas fa-certificate"></i>
                                <div>
                                    <h4>AWS Certified Cloud Practitioner</h4>
                                    <span>2021年12月</span>
                                </div>
                            </div>
                            <div class="cert-item">
                                <i class="fas fa-certificate"></i>
                                <div>
                                    <h4>CET-6 英语六级</h4>
                                    <span>2020年12月</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 联系部分 -->
            <section id="contact" class="section">
                <h2>联系我</h2>
                <div class="section-content">
                    <div class="contact-container">
                        <div class="contact-form">
                            <form id="contactForm">
                                <div class="form-group">
                                    <input type="text" id="name" placeholder="您的姓名" required>
                                </div>
                                <div class="form-group">
                                    <input type="email" id="email" placeholder="您的邮箱" required>
                                </div>
                                <div class="form-group">
                                    <input type="text" id="subject" placeholder="主题">
                                </div>
                                <div class="form-group">
                                    <textarea id="message" rows="5" placeholder="您的消息" required></textarea>
                                </div>
                                <button type="submit" class="btn">发送消息 <i class="fas fa-paper-plane"></i></button>
                            </form>
                        </div>
                        <div class="contact-info-main">
                            <h3>联系方式</h3>
                            <ul>
                                <li><i class="fas fa-envelope"></i> zhang.san@email.com</li>
                                <li><i class="fas fa-phone"></i> +86 138 1234 5678</li>
                                <li><i class="fas fa-map-marker-alt"></i> 北京市海淀区</li>
                            </ul>
                            
                            <h3>社交网络</h3>
                            <div class="social-links">
                                <a href="#"><i class="fab fa-github"></i></a>
                                <a href="#"><i class="fab fa-linkedin"></i></a>
                                <a href="#"><i class="fab fa-twitter"></i></a>
                                <a href="#"><i class="fab fa-stack-overflow"></i></a>
                            </div>
                            
                            <div class="qr-code">
                                <img src="assets/qr-code.png" alt="微信二维码">
                                <p>扫描添加我的微信</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>
    
    <!-- 页脚 -->
    <footer class="footer">
        <p>&copy; 2023 张三. 保留所有权利.</p>
        <p>最后更新: 2023年6月</p>
    </footer>
    
    <!-- 返回顶部按钮 -->
    <button id="backToTop" ><i class="fas fa-arrow-up"></i></button>
    
    <!-- JavaScript文件 -->
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script src="js/particles.js"></script>
    <script src="js/main.js"></script>


    <!-- 打印按钮 -->
<button id="printResume" title="打印简历"><i class="fas fa-print"></i> 打印简历</button>

<script>
// 打印功能
document.getElementById('printResume').addEventListener('click', function() {
    // 创建一个打印样式
    // 更新打印功能中的样式
const printStyle = document.createElement('style');
printStyle.innerHTML = `
    @media print {
        body * {
            visibility: hidden;
        }
        .container, .container * {
            visibility: visible;
        }
        .container {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            background: white !important; /* 强制白色背景 */
            box-shadow: none;
        }
        #particles-js {
            display: none !important;
        }
        #backToTop, #printResume, .main-nav, footer {
            display: none !important;
        }
        .sidebar {
            page-break-after: always;
            background-color: #2c3e50 !important; /* 强制深色背景 */
        }
        a {
            text-decoration: none;
            color: inherit;
        }
    }
`;
    document.head.appendChild(printStyle);
    
    // 触发打印
    window.print();
    
    // 打印完成后移除样式
    setTimeout(() => {
        document.head.removeChild(printStyle);
    }, 1000);
});
</script>
</body>
</html>